<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title" style="height: 65px">
        <div style="margin-bottom: 5px; margin-top: 15px; margin-left: 10px"></div>
        <a-space style="margin-left: 10px; margin-bottom: 10px">
          <span>开始时间：</span>
          <a-date-picker v-model:value="startDate" :format="dateFormat" />
        </a-space>
        <a-space style="margin-left: 10px; margin-bottom: 10px">
          <span>结束时间：</span>
          <a-date-picker v-model:value="endDate" :format="dateFormat" />
        </a-space>
        <a-space style="margin-left: 10px; margin-bottom: 10px">
          <a-input-search
            v-model:value="txtKeyWord"
            placeholder="请输入户主姓名、地址或房屋编号进行查询"
            enter-button
            style="width: 360px; margin-top: -5px"
            @search="onSearch"
          />
        </a-space>
        <a-space style="float: right; margin-right: 10px">
          <a-button type="primary" @click="handleHoustDetailExport"> 导出明细</a-button>
        </a-space>
      </div>
      <div style="width: 100%; background: #fff; height: 40px">
        <div style="width: 45%; float: left; font-size: 16px; padding-left: 20px; line-height: 37px"
          ><home-outlined two-tone-color="#eb2f96" /><span style="padding: 0px 10px">
            {{ title }}</span
          ></div
        >
        <div
          style="
            width: 30%;
            float: right;
            font-size: 16px;
            padding-left: 20px;
            line-height: 37px;
            text-align: right;
            padding-right: 20px;
          "
          ><a style="color: blue" @click="getBack"
            ><arrow-left-outlined two-tone-color="#eb2f96" style="padding: 0px 10px" />返回上一页</a
          ></div
        >
      </div>
      <a-table
        :columns="computedTableColumn"
        :data-source="computedCheckTableDataList"
        :page-size-options="pageSizeOptions"
        :loading="loading"
        bordered
        :pagination="false"
        size="middle"
        :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
      />
      <div class="pagination">
        <a-pagination
          show-size-changer
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import moment from 'moment';
  import dayjs from 'dayjs';
  import { ref, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';
  import { getJcHourseMxDetail } from '/@/api/demo/api';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  let userInfo = ref<any>(null);
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(200); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(15);
  const txtKeyWord = ref(''); //关键字
  let loading = ref(false);
  const pageSizeOptions = ref<string[]>(['100', '200', '300']);
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  //  调用 父组件传过来的方法
  const startDate = ref<any>(null); // 开始时间
  const endDate = ref<any>(null); // 结束时间
  const dateFormat = 'YYYY-MM-DD';
  const role_type = ref<string>('5');
  const zgvalue = ref<string>('');
  // 使用 useRouter 创建一个 router 实例
  const route = useRoute();
  const router = useRouter();
  const { xzq, xzqdm, towndm, villagedm, check_name, check_id, type, yhly, startTime, endTime,category,currentTitle } =
    route.query;
  const title = ref('');
  let TableSource = ref<any>([]);
  let total = ref(0);
  const columns = [
    { title: '序号', width: 80, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '区县名称',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'center',
      width: 170,
    },
    {
      title: '乡镇名称',
      dataIndex: 'town',
      key: 'town',
      align: 'center',
      width: 170,
    },
    {
      title: '村级名称',
      dataIndex: 'village',
      key: 'village',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'village' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    // 居住 商业
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'hzxm' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    // 居住 商业
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'left',
      width: 250,
      scopedSlots: { customRender: 'address' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    //  商业
    {
      title: '房屋编号',
      dataIndex: 'fwbh',
      key: 'fwbh',
      align: 'center',
      width: 170,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        return {
          style: style,
          class: 'cell-hover',
          onClick: async () => {
            getDetailData(row);
          },
        };
      },
    },
    {
      title: '整改状态',
      dataIndex: 'zgvalue',
      key: 'zgvalue',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'zgvalue' },
      ellipsis: true, //需ant版本为1.5及以上
      customCell: (row, index, column) => {
        let style = '';
        if (row.zgvalue == '已整改') {
          style = 'color: green;';
        } else if (row.zgvalue == '未整改') {
          style = 'color: red;';
        } else {
          style = 'color: #000;';
        }
        return {
          style: style,
        };
      },
    },
  ];
  // 计算属性，用于实时更新数据到页面上
  const computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = columns;
    return newColumn;
  });
  const computedCheckTableDataList = computed(() => {
    return TableSource.value;
  });

  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const getCode = async () => {
    if (startTime != null && startTime != '') {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      const sTime = moment(startTime + '').format('YYYY-MM-DD');
      const eTime = moment(endTime + '').format('YYYY-MM-DD');
      const start: any = dayjs(sTime);
      const end: any = dayjs(eTime);
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      startDate.value = start;
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      endDate.value = end;
    }
    role_type.value = yhly + '';
    console.log('**********startDate.value***********', startTime);
  };
  const getRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      xzqdm: xzqdm,
      towndm: towndm + '',
      villagedm: villagedm + '',
      type: type,
      check_id: check_id,
      txtKeyWord: txtKeyWord.value,
      yhly: role_type.value,
      startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
      endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
      category: category + '',
    };
    console.log('**********params***********', params);

    loading.value = true;

    let resdate = await getJcHourseMxDetail(params);
    loading.value = false;
    let list = resdate.items;
    TableSource.value = list;
    total.value = resdate.total;
    title.value = currentTitle + ' (总数量：' + resdate.total + ')';
  };
  //导出
  function handleHoustDetailExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url:
        uriBase +
        '/export/static/GetJcYhMxExport?access_token=' +
        tk +
        '&type=' +
        type +
        '&towndm=' +
        towndm +
        '&villagedm=' +
        villagedm +
        '&txtKeyWord=' +
        txtKeyWord.value +
        '&yhly=' +
        role_type.value +
        '&zgvalue=' +
        zgvalue.value +
        '&startime=' +
        moment(startDate.value.$d).format('YYYY-MM-DD') +
        '&endtime=' +
        moment(endDate.value.$d).format('YYYY-MM-DD') +
        '&check_id=' +
        check_id +
        '&xzqdm=' +
        xzqdm +
        '&category=' +
        category,
      target: '_blank',
    });
  }
  //  搜索事件
  const onSearch = () => {
    getRecordTableData();
  };
  //根据房屋编号获取详细信息
  const getDetailData = async (row: any) => {
    console.log('=========================================', row);
    router.push({
      path: '/utils/houseCheckLog',
      query: {
        xzq: row.xzq,
        town: row.town,
        village: row.village,
        hzxm: row.hzxm,
        fwbh: row.fwbh,
      },
    });
    console.log('=========================================', router);
  };
  const getBack = () => {
    router.go(-1);
  };
  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    //  pageIndex.value = pageIndex;
    //  pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight + 250;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    //getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getRecordTableData();
    //getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    getCode();
    getRecordTableData();
    getTableHeight();
    // getTableData();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .col-sql {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
